<template>
  <div id="app">
    <router-view>
    </router-view>
    <div class="nav border-top">
      <div v-for="(item,index) of icon" :key="item.id" class="fx" @click="iclick(index)">
        <img :src="item.img" alt="" />
        <p :class="item.active">{{item.text}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      icon: [
        {
          id: "1",
          img: "/static/images/nav-1hov.png",
          text: "主页",
          path: "/",
          active: "active"
        },
        {
          id: "2",
          img: "/static/images/nav-2.png",
          text: "试听",
          path: "/Auditions",
          active: ""
        },
        {
          id: "3",
          img: "/static/images/nav-3.png",
          text: "咨询",
          path: "/Consultation",
          active: ""
        },
        {
          id: "4",
          img: "/static/images/nav-4.png",
          text: "选课",
          path: "/course",
          active: ""
        },
        {
          id: "5",
          img: "/static/images/nav-5.png",
          text: "我的",
          path: "/Center",
          active: ""
        }
      ]
    };
  },
  methods: {
    iclick(index) {
      this.icon.forEach((item, inde) => {
        item.img = `/static/images/nav-${inde + 1}.png`;
        item.active = "";
        if (index == inde) {
          item.img = `/static/images/nav-${index + 1}hov.png`;
          item.active = "active";
          this.$router.push(item.path);
        }
      });
    }
  },
  mounted: function() {
    this.$router.push("/");
  }
};
</script>
<style scoped>
.nav {
  width: 100%;
  height: 4.5rem;
  border-top: 1xp solid #cccccc;
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}
.nav .fx {
  flex: 1;
  justify-content: center;
  text-align: center;
  padding-top: 0.6rem;
}
.nav .fx img {
  width: 45%;
}
.nav .fx p {
  font-size: 1rem;
  padding-top: 0.4rem;
}
.nav .fx p.active {
  color: #ff3849;
}
</style>
